fix: image editor fit view incorrect, do not query gguf files when gguf unchecked

src/components/card-wrapper/simple-card.tsx

@@ -9,7 +9,6 @@ const SimpleCardItemWrapper = styled.div`
   width: 100%;
   height: 100%;
   gap: 16px;
-  margin-bottom: 16px;
 `;
 
 const useStyles = createStyles(({ css, token }) => ({
@@ -32,8 +31,24 @@ const useStyles = createStyles(({ css, token }) => ({
       font-weight: var(--font-weight-medium);
     }
     .content {
+      display: flex;
+      justify-content: center;
+      align-items: center;
       font-size: ${token.fontSize}px;
       color: ${token.colorTextSecondary};
+      gap: 8px;
+      .icon {
+        display: inline-block;
+        width: 10px;
+        height: 10px;
+        gap: 10px;
+        &.roundRect {
+          border-radius: 2px;
+        }
+        &.circle {
+          border-radius: 50%;
+        }
+      }
     }
   `
 }));
@@ -42,21 +57,36 @@ export const SimpleCardItem: React.FC<{
   content?: React.ReactNode;
   style?: React.CSSProperties;
   bordered?: boolean;
+  color?: string;
+  iconType?: string;
 }> = (props) => {
   const { styles, cx } = useStyles();
 
-  const { title, content, style, bordered } = props;
+  const { title, content, style, bordered, iconType, color } = props;
 
   return (
     <div className={cx({ bordered: bordered }, styles.wrapper)} style={style}>
       <div className="title">{title}</div>
-      <div className="content">{content}</div>
+      <div className="content">
+        <span
+          className={cx([iconType], 'icon')}
+          style={{
+            backgroundColor: color || 'transparent'
+          }}
+        ></span>
+        <span>{content}</span>
+      </div>
     </div>
   );
 };
 
 export const SimpleCard: React.FC<{
-  dataList: { label: string; value: React.ReactNode }[];
+  dataList: {
+    label: string;
+    value: React.ReactNode;
+    color: string;
+    iconType: string;
+  }[];
   height?: string | number;
   bordered?: boolean;
 }> = (props) => {
@@ -70,6 +100,8 @@ export const SimpleCard: React.FC<{
           title={item.label}
           content={item.value}
           bordered={bordered}
+          color={item.color}
+          iconType={item.iconType}
         ></SimpleCardItem>
       ))}
     </SimpleCardItemWrapper>

src/components/echarts/config.ts

@@ -41,18 +41,23 @@ export default function useChartConfig() {
     borderColor: 'transparent',
     formatter(params: any, callback?: (val: any) => any) {
       let result = `<span class="tooltip-x-name">${params[0].axisValue}</span>`;
+
       params.forEach((item: any) => {
         let value = isFunction(callback)
           ? callback?.(item.data.value)
           : item.data.value;
+
+        const borderRadius = item.seriesType === 'bar' ? '2px' : '8px';
+
         result += `<span class="tooltip-item">
-     <span class="tooltip-item-name">
-       <span style="display:inline-block;margin-right:5px;border-radius:8px;width:8px;height:8px;background-color:${item.color};"></span>
-       <span class="tooltip-title">${item.seriesName}</span>:
-     </span>
-      <span class="tooltip-value">${value}</span>
+          <span class="tooltip-item-name">
+            <span style="display:inline-block;margin-right:5px;border-radius:${borderRadius};width:8px;height:8px;background-color:${item.color};"></span>
+            <span class="tooltip-title">${item.seriesName}</span>:
+          </span>
+            <span class="tooltip-value">${value}</span>
       </span>`;
       });
+
       return `<div class="tooltip-wrapper">${result}</div>`;
     }
   };

src/components/echarts/mix-line-bar.tsx

@@ -43,7 +43,11 @@ const MixLineBarChart: React.FC<
     title: {
       text: ''
     },
-    grid,
+    grid: {
+      ...grid,
+      top: 20,
+      bottom: 20
+    },
     tooltip: {
       ...tooltip,
       formatter(params: any) {
@@ -62,7 +66,10 @@ const MixLineBarChart: React.FC<
     yAxis,
     legend: {
       ...legend,
-      data: legendData
+      data: legendData,
+      itemGap: 20,
+      bottom: 5,
+      show: false
     },
 
     series: []

src/components/image-editor/index.tsx

@@ -433,7 +433,6 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = forwardRef(
       fitView();
       setActiveScale(autoScale.current);
       updateCursorSize();
-      redrawStrokes(strokesRef.current);
     };
 
     const handleBrushSizeChange = (value: number) => {
@@ -458,7 +457,14 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = forwardRef(
           undo();
         }
       };
+      window.addEventListener('keydown', handleUndoShortcut);
 
+      return () => {
+        window.removeEventListener('keydown', handleUndoShortcut);
+      };
+    }, []);
+
+    useEffect(() => {
       const handleMouseDown = (e: MouseEvent) => {
         mouseDownState.current = true;
       };
@@ -467,7 +473,6 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = forwardRef(
         mouseDownState.current = false;
       };
 
-      window.addEventListener('keydown', handleUndoShortcut);
       // mouse down
       window.addEventListener('mousedown', handleMouseDown);
 
@@ -475,7 +480,7 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = forwardRef(
       window.addEventListener('mouseup', handleMouseUp);
       return () => {
         clearTimeout(timer.current);
-        window.removeEventListener('keydown', handleUndoShortcut);
+
         window.removeEventListener('mousedown', handleMouseDown);
         window.removeEventListener('mouseup', handleMouseUp);
       };