2025-08-28 09:20:15 +08:00
|
|
|
from typing import Any, Literal
|
|
|
|
|
|
2026-02-06 20:13:40 +08:00
|
|
|
from pydantic import BaseModel, Field
|
2025-08-28 09:20:15 +08:00
|
|
|
|
|
|
|
|
from ..core.base import RenderableComponent
|
|
|
|
|
|
2026-02-06 20:13:40 +08:00
|
|
|
__all__ = ["KpiCard", "Timeline", "TimelineItem"]
|
2025-08-28 09:20:15 +08:00
|
|
|
|
|
|
|
|
|
|
|
|
|
class KpiCard(RenderableComponent):
|
|
|
|
|
"""一个用于展示关键性能指标(KPI)的统计卡片。"""
|
|
|
|
|
|
|
|
|
|
component_type: Literal["kpi_card"] = "kpi_card"
|
2026-02-06 20:13:40 +08:00
|
|
|
"""组件类型"""
|
2025-08-28 09:20:15 +08:00
|
|
|
label: str = Field(..., description="指标的标签或名称")
|
2025-09-11 10:31:49 +08:00
|
|
|
"""指标的标签或名称"""
|
2025-08-28 09:20:15 +08:00
|
|
|
value: Any = Field(..., description="指标的主要数值")
|
2025-09-11 10:31:49 +08:00
|
|
|
"""指标的主要数值"""
|
2025-08-28 09:20:15 +08:00
|
|
|
unit: str | None = Field(default=None, description="数值的单位,可选")
|
2025-09-11 10:31:49 +08:00
|
|
|
"""数值的单位,可选"""
|
2025-08-28 09:20:15 +08:00
|
|
|
change: str | None = Field(
|
|
|
|
|
default=None, description="与上一周期的变化,例如 '+15%' 或 '-100'"
|
|
|
|
|
)
|
2025-09-11 10:31:49 +08:00
|
|
|
"""与上一周期的变化,例如 '+15%' 或 '-100'"""
|
2025-08-28 09:20:15 +08:00
|
|
|
change_type: Literal["positive", "negative", "neutral"] = Field(
|
|
|
|
|
default="neutral", description="变化的类型,用于决定颜色"
|
|
|
|
|
)
|
2025-09-11 10:31:49 +08:00
|
|
|
"""变化的类型,用于决定颜色"""
|
2025-08-28 09:20:15 +08:00
|
|
|
icon_svg: str | None = Field(
|
|
|
|
|
default=None, description="卡片中显示的可选图标 (SVG path data)"
|
|
|
|
|
)
|
2025-09-11 10:31:49 +08:00
|
|
|
"""卡片中显示的可选图标 (SVG path data)"""
|
2025-08-28 09:20:15 +08:00
|
|
|
|
|
|
|
|
@property
|
|
|
|
|
def template_name(self) -> str:
|
|
|
|
|
return "components/widgets/kpi_card"
|
2026-02-06 20:13:40 +08:00
|
|
|
|
|
|
|
|
|
|
|
|
|
class TimelineItem(BaseModel):
|
|
|
|
|
"""时间轴中的单个事件点。"""
|
|
|
|
|
|
|
|
|
|
timestamp: str = Field(..., description="显示在时间点旁边的时间或标签")
|
|
|
|
|
"""显示在时间点旁边的时间或标签"""
|
|
|
|
|
title: str = Field(..., description="事件的标题")
|
|
|
|
|
"""事件的标题"""
|
|
|
|
|
content: str = Field(..., description="事件的详细描述")
|
|
|
|
|
"""事件的详细描述"""
|
|
|
|
|
icon: str | None = Field(default=None, description="可选的自定义图标SVG路径")
|
|
|
|
|
"""可选的自定义图标SVG路径"""
|
|
|
|
|
color: str | None = Field(default=None, description="可选的自定义颜色,覆盖默认")
|
|
|
|
|
"""可选的自定义颜色,覆盖默认"""
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
class Timeline(RenderableComponent):
|
|
|
|
|
"""一个垂直时间轴组件,用于按顺序展示事件。"""
|
|
|
|
|
|
|
|
|
|
component_type: Literal["timeline"] = "timeline"
|
|
|
|
|
"""组件类型"""
|
|
|
|
|
items: list[TimelineItem] = Field(
|
|
|
|
|
default_factory=list, description="时间轴项目列表"
|
|
|
|
|
)
|
|
|
|
|
"""时间轴项目列表"""
|
|
|
|
|
|
|
|
|
|
@property
|
|
|
|
|
def template_name(self) -> str:
|
|
|
|
|
return "components/widgets/timeline"
|