fix: Modify icon file, knowledge base display style (#10104)

### What problem does this PR solve?

fix: Modify icon file, knowledge base display style #9869

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

web/src/components/file-status-badge.tsx

@@ -1,24 +1,28 @@
 // src/pages/dataset/file-logs/file-status-badge.tsx
 import { FC } from 'react';
-
+/**
+ * params: status: 0 not run yet 1 running, 2 cancel, 3 success, 4 fail
+ */
 interface StatusBadgeProps {
-  status: 'Success' | 'Failed' | 'Running' | 'Pending';
+  // status: 'Success' | 'Failed' | 'Running' | 'Pending';
+  status: 0 | 1 | 2 | 3 | 4;
+  name?: string;
 }
 
-const FileStatusBadge: FC<StatusBadgeProps> = ({ status }) => {
+const FileStatusBadge: FC<StatusBadgeProps> = ({ status, name }) => {
   const getStatusColor = () => {
     // #3ba05c  → rgb(59, 160, 92)   // state-success
     // #d8494b  → rgb(216, 73, 75)   // state-error
     // #00beb4  → rgb(0, 190, 180)   // accent-primary
     // #faad14  → rgb(250, 173, 20)  // state-warning
     switch (status) {
-      case 'Success':
+      case 3:
         return `bg-[rgba(59,160,92,0.1)] text-state-success`;
-      case 'Failed':
+      case 4:
         return `bg-[rgba(216,73,75,0.1)] text-state-error`;
-      case 'Running':
+      case 1:
         return `bg-[rgba(0,190,180,0.1)] text-accent-primary`;
-      case 'Pending':
+      case 0:
         return `bg-[rgba(250,173,20,0.1)] text-state-warning`;
       default:
         return 'bg-gray-500/10 text-white';
@@ -31,13 +35,13 @@ const FileStatusBadge: FC<StatusBadgeProps> = ({ status }) => {
     // #00beb4  → rgb(0, 190, 180)   // accent-primary
     // #faad14  → rgb(250, 173, 20)  // state-warning
     switch (status) {
-      case 'Success':
+      case 3:
         return `bg-[rgba(59,160,92,1)] text-state-success`;
-      case 'Failed':
+      case 4:
         return `bg-[rgba(216,73,75,1)] text-state-error`;
-      case 'Running':
+      case 1:
         return `bg-[rgba(0,190,180,1)] text-accent-primary`;
-      case 'Pending':
+      case 0:
         return `bg-[rgba(250,173,20,1)] text-state-warning`;
       default:
         return 'bg-gray-500/10 text-white';
@@ -46,10 +50,10 @@ const FileStatusBadge: FC<StatusBadgeProps> = ({ status }) => {
 
   return (
     <span
-      className={`inline-flex items-center w-[75px] px-2 py-1 rounded-full text-xs font-medium ${getStatusColor(0.1)}`}
+      className={`inline-flex items-center w-[75px] px-2 py-1 rounded-full text-xs font-medium ${getStatusColor()}`}
     >
       <div className={`w-1 h-1 mr-1 rounded-full ${getBgStatusColor()}`}></div>
-      {status}
+      {name || ''}
     </span>
   );
 };

web/src/components/icon-font.tsx

@@ -4,6 +4,7 @@ import { getExtension } from '@/utils/document-util';
 
 type IconFontType = {
   name: string;
+
   className?: string;
 };
 
@@ -13,6 +14,23 @@ export const IconFont = ({ name, className }: IconFontType) => (
   </svg>
 );
 
+export function IconFontFill({
+  name,
+  className,
+  isFill = true,
+}: IconFontType & { isFill?: boolean }) {
+  return (
+    <span className={cn('size-4', className)}>
+      <svg
+        className={cn('size-4', className)}
+        style={{ fill: isFill ? 'currentColor' : '' }}
+      >
+        <use xlinkHref={`#icon-${name}`} />
+      </svg>
+    </span>
+  );
+}
+
 export function FileIcon({
   name,
   className,

web/src/components/ui/modal/modal.tsx

@@ -187,7 +187,7 @@ const Modal: ModalType = ({
             )}
 
             {/* content */}
-            <div className="py-2 px-6 overflow-y-auto max-h-[80vh] focus-visible:!outline-none">
+            <div className="py-2 px-6 overflow-y-auto scrollbar-auto max-h-[80vh] focus-visible:!outline-none">
               {destroyOnClose && !open ? null : children}
             </div>