🔢 数值组件设计方案

class NumericWidget(BaseWidget): """数值组件抽象基类""" def __init__(self): super().__init__() self._main_value = "" # 主要数值 self._label = "" # 标签文本 self._secondary_text = "" # 次要文本 self._prefix = "" # 前缀（如货币符号） self._suffix = "" # 后缀（如单位） self._theme = "primary" # 主题色 self._size = "medium" # 尺寸 self._alignment = "center" # 对齐方式 self._background = None # 背景色 self._border = None # 边框样式 # 通用配置方法 def set_main_value(self, value: str) -> "NumericWidget" def set_label(self, label: str) -> "NumericWidget" def set_secondary_text(self, text: str) -> "NumericWidget" def set_prefix(self, prefix: str) -> "NumericWidget" def set_suffix(self, suffix: str) -> "NumericWidget" def set_theme(self, theme: str) -> "NumericWidget" def set_size(self, size: str) -> "NumericWidget" def set_alignment(self, alignment: str) -> "NumericWidget" def set_background(self, color: str) -> "NumericWidget" def set_border(self, style: str) -> "NumericWidget"

class MetricWidget(NumericWidget): """指标组件 - 继承数值组件""" def __init__(self): super().__init__() self._change_value = None # 变化值 self._change_trend = None # 趋势方向 self._comparison_value = None # 对比值 self._comparison_period = None # 对比周期 self._target_value = None # 目标值 def set_change(self, change: str, trend: str = "neutral") -> "MetricWidget": """设置变化值和趋势""" self._change_value = change self._change_trend = trend # up, down, neutral return self def set_comparison(self, value: str, period: str) -> "MetricWidget": """设置对比数据""" self._comparison_value = value self._comparison_period = period return self def set_target(self, target: str) -> "MetricWidget": """设置目标值""" self._target_value = target return self def set_unit(self, unit: str) -> "MetricWidget": """设置单位（便捷方法）""" return self.set_suffix(unit) # 使用示例 metric = (MetricWidget() .set_main_value("125,000") .set_prefix("¥") .set_label("月度收入") .set_change("+15.2%", "up") .set_theme("primary"))

class PricingWidget(NumericWidget): """价格组件 - 继承数值组件""" def __init__(self): super().__init__() self._original_price = None # 原价 self._discount_text = None # 折扣信息 self._period = None # 计费周期 self._highlight = False # 促销高亮 def set_original_price(self, price: str) -> "PricingWidget": """设置原价""" self._original_price = price return self def set_discount(self, discount: str) -> "PricingWidget": """设置折扣信息""" self._discount_text = discount return self def set_period(self, period: str) -> "PricingWidget": """设置计费周期""" self._period = period return self.set_label(period) # 周期作为标签显示 def set_currency(self, currency: str) -> "PricingWidget": """设置货币符号（便捷方法）""" return self.set_prefix(currency) def set_highlight(self, highlight: bool = True) -> "PricingWidget": """设置促销高亮""" self._highlight = highlight if highlight: self.set_theme("danger") # 促销用红色突出 return self # 使用示例 pricing = (PricingWidget() .set_main_value("99") .set_currency("¥") .set_original_price("¥199") .set_discount("限时5折") .set_highlight(True))

class TrendWidget(NumericWidget): """趋势组件 - 继承数值组件""" def __init__(self): super().__init__() self._trend_direction = "neutral" # 趋势方向 self._show_arrow = True # 显示箭头 self._change_value = None # 变化值 self._comparison_period = None # 对比周期 self._auto_color = True # 自动着色 def set_trend(self, trend: str) -> "TrendWidget": """设置趋势方向""" self._trend_direction = trend # up, down, neutral if self._auto_color: self._update_theme_by_trend() return self def set_arrow(self, show: bool = True) -> "TrendWidget": """设置是否显示箭头""" self._show_arrow = show return self def set_change_value(self, change: str) -> "TrendWidget": """设置变化数值""" self._change_value = change return self.set_main_value(change) def set_comparison_period(self, period: str) -> "TrendWidget": """设置对比周期""" self._comparison_period = period return self.set_secondary_text(f"较{period}") def set_auto_color(self, auto: bool = True) -> "TrendWidget": """自动根据趋势设置颜色""" self._auto_color = auto if auto: self._update_theme_by_trend() return self def _update_theme_by_trend(self): """根据趋势更新主题色""" if self._trend_direction == "up": self.set_theme("success") elif self._trend_direction == "down": self.set_theme("danger") else: self.set_theme("neutral") # 使用示例 trend = (TrendWidget() .set_change_value("+15.2") .set_suffix("%") .set_trend("up") .set_label("月环比增长") .set_arrow(True))

# 主题枚举 class NumericTheme(Enum): PRIMARY = "primary" # #0078d4 蓝色 SUCCESS = "success" # #107c10 绿色 WARNING = "warning" # #ff8c00 橙色 DANGER = "danger" # #d13438 红色 NEUTRAL = "neutral" # #605e5c 灰色 # 尺寸枚举 class NumericSize(Enum): SMALL = "small" # 小尺寸 1.8em MEDIUM = "medium" # 中尺寸 2.5em LARGE = "large" # 大尺寸 3.2em XLARGE = "xlarge" # 超大尺寸 4em # 趋势方向枚举 class TrendDirection(Enum): UP = "up" # 上升趋势 DOWN = "down" # 下降趋势 NEUTRAL = "neutral" # 保持不变 # 对齐方式枚举 class NumericAlignment(Enum): LEFT = "left" # 左对齐 CENTER = "center" # 居中对齐 RIGHT = "right" # 右对齐 # 通用配置示例 config = { "themes": { "primary": {"color": "#0078d4", "bg": "#f0f8ff"}, "success": {"color": "#107c10", "bg": "#f0fff0"}, "warning": {"color": "#ff8c00", "bg": "#fff8dc"}, "danger": {"color": "#d13438", "bg": "#ffe4e1"}, "neutral": {"color": "#605e5c", "bg": "#f8f9fa"} }, "sizes": { "small": {"font_size": "1.8em", "padding": "15px"}, "medium": {"font_size": "2.5em", "padding": "20px"}, "large": {"font_size": "3.2em", "padding": "25px"}, "xlarge": {"font_size": "4em", "padding": "30px"} }, "arrows": { "up": "↗", "down": "↘", "neutral": "→", "up_alt": "▲", "down_alt": "▼", "neutral_alt": "—" } }

# 抽象前 - 三个独立的组件 metric = MetricWidget().set_value("125,000").set_label("收入").set_change("+15%", "up") pricing = PricingWidget().set_price("99").set_original("199").set_currency("¥") trend = TrendWidget().set_value("+15.2%").set_trend("up").set_label("增长") # 抽象后 - 统一的基础API + 专有功能 metric = (MetricWidget() .set_main_value("125,000") # 统一API .set_prefix("¥") # 统一API .set_label("月度收入") # 统一API .set_theme("primary") # 统一API .set_change("+15.2%", "up")) # 专有API pricing = (PricingWidget() .set_main_value("99") # 统一API .set_currency("¥") # 专有API (内部调用set_prefix) .set_original_price("199") # 专有API .set_discount("限时5折") # 专有API .set_highlight(True)) # 专有API trend = (TrendWidget() .set_change_value("+15.2") # 专有API (内部调用set_main_value) .set_suffix("%") # 统一API .set_label("月环比增长") # 统一API .set_trend("up") # 专有API (自动设置主题色) .set_arrow(True)) # 专有API # 一致性配置 - 所有组件都支持 for widget in [metric, pricing, trend]: widget.set_size("large").set_background("#f8f9fa").set_alignment("center")