fix:bug fix

Author: maguikai11

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

@@ -530,7 +530,7 @@ export const getDefaultMetricStyle = (title, subtitle) => ({
     "subtitleFontSize": 14,
     "subtitleColor": "#666",
     "subtitleAlign": "left",
-    "subtitleBold": false,
+    "subtitleBold": true,
     "subtitleItalic": false,
     "subtitleUnderline": false,
     "metricFontSize": 28,

src/frontend/platform/src/pages/Dashboard/components/config/ComponentConfigDrawer.tsx

@@ -29,8 +29,8 @@ const FULL_DEFAULT_STYLE_CONFIG: ComponentStyleConfig = {
   bgColor: "",
 
   title: "",
-  titleFontSize: 14,
-  titleBold: false,
+  titleFontSize: 16,
+  titleBold: true,
   titleItalic: false,
   titleUnderline: false,
   titleStrikethrough: false,
@@ -44,7 +44,7 @@ const FULL_DEFAULT_STYLE_CONFIG: ComponentStyleConfig = {
   xAxisUnderline: false,
   xAxisStrikethrough: false,
   xAxisAlign: "center",
-  xAxisColor: "#000000",
+  xAxisColor: "#666666",
 
   yAxisTitle: "",
   yAxisFontSize: 14,
@@ -53,16 +53,16 @@ const FULL_DEFAULT_STYLE_CONFIG: ComponentStyleConfig = {
   yAxisUnderline: false,
   yAxisStrikethrough: false,
   yAxisAlign: "center",
-  yAxisColor: "#000000",
+  yAxisColor: "#666666",
 
   legendPosition: "bottom",
-  legendFontSize: 14,
+  legendFontSize: 12,
   legendBold: false,
   legendItalic: false,
   legendUnderline: false,
   legendStrikethrough: false,
   legendAlign: "left",
-  legendColor: "#000000",
+  legendColor: "#999999",
 
   showSubtitle: false,
   subtitle: "",
@@ -256,6 +256,7 @@ export function ComponentConfigDrawer() {
           originalName: field.displayName || field.fieldName,
           fieldType: field.role,
           timeGranularity: field.timeGranularity,
+          isDivide: field.isDivide,
           sort: null
         }
         chartState.setCategoryDimensions(prev => [...prev, newDimension])
@@ -360,7 +361,8 @@ export function ComponentConfigDrawer() {
         fieldType: field.role,
         sort: null,
         aggregation: 'sum' as const,
-        isVirtual: currentIsVirtual
+        isVirtual: currentIsVirtual,
+        isDivide: field.isDivide,
       }
 
       chartState.setValueDimensions(prev => [...prev, newMetric])

src/frontend/platform/src/pages/Dashboard/components/config/DatasetSelector.tsx

@@ -91,6 +91,7 @@ export function DatasetSelector({ selectedDatasetCode, isMetricCard, onDatasetCh
             fieldId: data.fieldId,
             fieldCode: data.fieldCode,
             fieldType,
+            isDivide: data.isDivide,
             timeGranularity: data.timeGranularity,
         }
 
@@ -121,6 +122,7 @@ export function DatasetSelector({ selectedDatasetCode, isMetricCard, onDatasetCh
             displayName: m.name,
             fieldType: m.field_type,
             isVirtual: m.is_virtual,
+            isDivide: m.formula,
             role: "metric" as const
         }))
 
@@ -278,7 +280,8 @@ export function DatasetSelector({ selectedDatasetCode, isMetricCard, onDatasetCh
                                         displayName: t(metric.field),
                                         fieldType: "number",
                                         role: "metric" as const,
-                                        isVirtual: metric.is_virtual
+                                        isVirtual: metric.is_virtual,
+                                        isDivide: metric.formula,
                                     }
                                     return (
                                         <div

src/frontend/platform/src/pages/Dashboard/components/config/DimensionBlock.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { useState } from "react"
+import { useEffect, useState } from "react"
 import { Button } from "@/components/bs-ui/button"
 import { Settings, X, Check } from "lucide-react"
 import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/components/bs-ui/dialog"
@@ -36,6 +36,7 @@ interface DimensionItem {
   isVirtual?: boolean // 补充定义
   fieldId?: string
   timeGranularity?: string
+  isDivide?: string
 }
 
 interface DimensionBlockProps {
@@ -91,7 +92,42 @@ export function DimensionBlock({
   const [formatDialogOpen, setFormatDialogOpen] = useState(false)
   const [localFormat, setLocalFormat] = useState<MetricFormat | null>(null)
   const [hoveredIcon, setHoveredIcon] = useState<string | null>(null)
-
+  // 监听editingMetric变化，设置默认格式
+  useEffect(() => {
+    if (editingMetric) {
+      console.log('Editing metric:', editingMetric);
+
+      const currentFormat = editingMetric.numberFormat;
+
+      if (currentFormat) {
+        console.log('使用现有的 numberFormat:', currentFormat);
+        setLocalFormat({
+          type: currentFormat.type,
+          decimalPlaces: currentFormat.decimalPlaces || 2,
+          unit: currentFormat.unit || '',
+          suffix: currentFormat.suffix || '',
+          thousandSeparator: currentFormat.thousandSeparator || false
+        });
+      } else {
+        const defaultFormat: MetricFormat = editingMetric.isDivide === "divide"
+          ? {
+            type: 'percent',
+            decimalPlaces: 2,
+            thousandSeparator: false,
+            unit: undefined,
+            suffix: ''
+          }
+          : {
+            type: 'number',
+            decimalPlaces: 2,
+            thousandSeparator: false,
+            unit: '',
+            suffix: ''
+          };
+        setLocalFormat(defaultFormat);
+      }
+    }
+  }, [editingMetric]);
   const getFieldTypeStyle = (dimension: DimensionItem) => {
     const isSelected = selectedDimensionId === dimension.id
     const bgColor = isSelected
@@ -301,15 +337,6 @@ export function DimensionBlock({
                           <DropdownMenuItem
                             onClick={() => {
                               setEditingMetric(dimension)
-                              setLocalFormat(
-                                dimension.numberFormat || {
-                                  type: 'number',
-                                  decimalPlaces: 2,
-                                  unit: '',
-                                  suffix: '',
-                                  thousandSeparator: false
-                                }
-                              )
                               setFormatDialogOpen(true)
                             }}
                           >

src/frontend/platform/src/pages/Dashboard/components/config/useChartState.tsx

@@ -131,6 +131,7 @@ export function useChartState(initialComponent: DashboardComponent) {
               fieldType: 'metric',
               isVirtual: metric.isVirtual || false,
               aggregation: metric.aggregation || 'sum',
+              isDivide: metric.formula,
               numberFormat: metric.numberFormat || {
                 type: 'number',
                 decimalPlaces: 2,
@@ -499,7 +500,8 @@ export function useChartState(initialComponent: DashboardComponent) {
         sort: null,
         sortPriority: 0,
         timeGranularity: data.timeGranularity,
-        fieldType
+        fieldType,
+        isDivide: data.isDivide,
       }
 
       if (section === 'category') {
@@ -601,23 +603,57 @@ export function useChartState(initialComponent: DashboardComponent) {
       timeGranularity: stackDimensions[0].timeGranularity || null
     } : undefined
 
-    const metrics = valueDimensions.map(metric => ({
-      fieldId: metric.fieldId,
-      fieldName: metric.originalName,
-      fieldCode: metric.name,
-      displayName: metric.displayName,
-      sort: metric.sort,
-      isVirtual: metric.isVirtual,
-      aggregation: metric.aggregation || 'sum',
-      numberFormat: metric.numberFormat || {
-        type: 'number' as const,
-        decimalPlaces: 2,
-        unit: undefined,
-        suffix: undefined,
-        thousandSeparator: true
+    const metrics = valueDimensions.map(metric => {
+      let numberFormat;
+      if (metric.isDivide === "divide") {
+        console.log('检测到除法指标:', metric.displayName);
+        if (metric.numberFormat) {
+          if (metric.numberFormat.type === 'percent') {
+            numberFormat = metric.numberFormat;
+            console.log('已使用百分比格式:', numberFormat);
+          } else {
+            numberFormat = {
+              type: 'percent' as const,
+              decimalPlaces: metric.numberFormat.decimalPlaces || 2,
+              unit: undefined,
+              suffix: metric.numberFormat.suffix || '',
+              thousandSeparator: false
+            };
+          }
+        } else {
+          numberFormat = {
+            type: 'percent' as const,
+            decimalPlaces: 2,
+            unit: undefined,
+            suffix: '',
+            thousandSeparator: false
+          };
+        }
+      } else {
+        numberFormat = metric.numberFormat || {
+          type: 'number' as const,
+          decimalPlaces: 2,
+          unit: undefined,
+          suffix: undefined,
+          thousandSeparator: true
+        };
       }
-    }))
 
+      console.log('最终 numberFormat:', numberFormat);
+
+      return {
+        fieldId: metric.fieldId,
+        fieldName: metric.originalName,
+        fieldCode: metric.name,
+        displayName: metric.displayName,
+        sort: metric.sort,
+        isVirtual: metric.isVirtual,
+        aggregation: metric.aggregation || 'sum',
+        isDivide: metric.isDivide,
+        formula: metric.isDivide === "divide" ? "divide" : undefined,
+        numberFormat: numberFormat
+      }
+    })
     // 4. 构建字段顺序 - 按照 sortPriorityOrder 排序
     const allFields = [
       ...categoryDimensions.map(d => ({