fix: some bugfix

Author: dolphin0618

src/frontend/platform/src/pages/Dashboard/colorSchemes.ts

@@ -528,15 +528,15 @@ export const getDefaultMetricStyle = (title, subtitle) => ({
     "titleUnderline": false,
     subtitle,
     "subtitleFontSize": 14,
-    "subtitleColor": "#000000",
+    "subtitleColor": "#666",
     "subtitleAlign": "left",
     "subtitleBold": false,
     "subtitleItalic": false,
     "subtitleUnderline": false,
-    "metricFontSize": 14,
-    "metricColor": "#000000",
-    "metricAlign": "left",
-    "metricBold": false,
+    "metricFontSize": 28,
+    "metricColor": "#4882f6",
+    "metricAlign": "start",
+    "metricBold": true,
     "metricItalic": false,
     "metricUnderline": false,
 })

src/frontend/platform/src/pages/Dashboard/components/charts/BaseChart.tsx

@@ -279,7 +279,8 @@ const getCartesianChartOption = (
     name: styleConfig.yAxisTitle || '',
     nameLocation: styleConfig.yAxisAlign === 'right' ? 'end' : styleConfig.yAxisAlign === 'left' ? 'start' : 'center',
     nameRotate: isHorizontal ? 0 : 90,
-    nameTextStyle: yAxisTitleStyle
+    nameTextStyle: yAxisTitleStyle,
+    boundaryGap: [0, '20%']
   };
 
   const lastValueIndexes = dimensions.map((_, dimIdx) => {
@@ -333,7 +334,7 @@ const getCartesianChartOption = (
       };
     }
     if (isStacked) item.stack = 'total';
-    if (isArea) item.areaStyle = {};
+    if (isArea) item.areaStyle = {opacity: 0.1};
     // if (isLineOrArea) item.smooth = true;
 
     return item;

src/frontend/platform/src/pages/Dashboard/components/charts/MetricCard.tsx

@@ -163,17 +163,38 @@ export function MetricCard({ title: indicatorName, data, isPreviewMode, dataConf
     align: styleConfig.metricAlign
   })
 
+  const subtitleLineHeight = styleConfig.subtitleFontSize ? styleConfig.subtitleFontSize * 1.5 : 21 // 默认14px * 1.5
+  const maxSubtitleHeight = subtitleLineHeight * 4
+
   return (
-    <div className="group h-full flex flex-col justify-between select-none">
-      {/* subtitle */}
+    <div className="group h-full flex flex-col select-none py-1 px-2">
+      {/* title - single line */}
+      <div style={titleStyle} className='truncate mb-1'>{indicatorName}</div>
+
+      {/* subtitle - max 4 lines with ellipsis */}
       {styleConfig.showSubtitle && subTitle ? (
-        <div style={subtitleStyle}>{subTitle}</div>
-      ) : <div></div>}
-      <div className='flex justify-between items-end'>
-        {/* title */}
-        <div style={titleStyle} className='w-1/2 truncate'>{indicatorName}</div>
-        {/* value */}
-        <div style={metricStyle} className='w-1/2 leading-[1.2em] truncate pr-1'>
+        <div
+          style={{
+            ...subtitleStyle,
+            display: '-webkit-box',
+            WebkitLineClamp: 4,
+            WebkitBoxOrient: 'vertical',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            wordBreak: 'break-all',
+            lineHeight: `${subtitleLineHeight}px`,
+            maxHeight: `${maxSubtitleHeight}px`,
+            flex: 1,
+            minHeight: 0
+          }}
+        >
+          {subTitle}
+        </div>
+      ) : <div className="flex-1"></div>}
+
+      {/* value - stays at bottom */}
+      <div className='mt-auto pt-2'>
+        <div style={metricStyle} className='leading-[1.2em] truncate'>
           {formatValue}
           {displayUnit && <span className="text-xl ml-2 text-muted-foreground">{displayUnit}</span>}
         </div>
@@ -188,16 +209,6 @@ export function MetricCard({ title: indicatorName, data, isPreviewMode, dataConf
         )}
         size={16}
       />}
-      {/* 趋势信息 */}
-      {/* {trend && (
-        <div className="flex items-center gap-1 text-sm">
-          {getTrendIcon()}
-          <span className={getTrendColor()}>
-            {trend.value > 0 ? '+' : ''}{trend.value}%
-          </span>
-          <span className="text-muted-foreground ml-1">{trend.label}</span>
-        </div>
-      )} */}
     </div>
   )
-}
+}